import { useEffect, useRef } from "react"

class 气泡{
    static 所有气泡 = []
    constructor(x, y, r, color, speedx,speedy, fx) {
        this.x = x
        this.y = y
        this.r = r
        this.color = color
        this.speedx = speedx
        this.speedy = speedy
        this.fx = fx
        气泡.所有气泡.push(this)
    }
    moving = () => {
        // console.log('移动');
        

            if (this.fx <= 2.5) {
                this.x -= this.speedx
                this.y -= this.speedy
                return
            }
            if (this.fx <= 5) {
                this.x -= this.speedx
                this.y += this.speedy
                return
            }
            if (this.fx < 7.5) {
                this.x += this.speedx
                this.y += this.speedy
                return
            }
            if(this.fx <= 10){
                this.x += this.speedx
                this.y -= this.speedy
            }else{
                console.log(this,'动不了');
                alert(this,'bug动不了')
            }
            
        


    }
    darw = (canvas,ctx) => {
        
        if (
            this.x <= -this.r ||
            this.x >= canvas.width + this.r ||
            this.y <= -this.r ||
            this.y >= canvas.height + this.r

        ) {
            // console.log('出界了',this.x,this.y,canvas.width,canvas.height);
            气泡.所有气泡.forEach((item, index, arr) => {
                if (item === this) {
                    arr.splice(index, 1)
                }
            })

        } else {
            ctx.fillStyle = this.color
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
            ctx.closePath()
            ctx.fill()
        }

    }
}
const creatR = (num=1,max=40) => Math.round(Math.random() * max + num)
const creatcolor = () => `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random() * 0.5 + 0.4})`
const creatSpeed = () => Math.random()*0.5
const creatFx = () => Math.round(Math.random() * 10)

export default function 动画({ width, height }) {
    const canvasref = useRef('canvas')

    useEffect(() => {
        const canvas = canvasref.current
        // console.dir(canvas);
        const ctx = canvas.getContext('2d')
        ctx.globalCompositeOperation = 'destination-over'
        // console.log('CANVAS加载完成')

        // document.onmousemove = e => {
        //     const x = e.pageX 
        //     const y = e.pageY 
        //     creat气泡(x,y)
        //     // console.log({x,y,speed,fx});
        // }
        // document.ontouchmove = e => {
        //     const x = e.touches[0].pageX
        //     const y = e.touches[0].pageY
        //     creat气泡(x,y)
        // }
        const creat气泡 = (x,y) => {
            new 气泡(x,y,creatR(105,460),creatcolor(),creatSpeed(),creatSpeed(),creatFx())
            
        }
        
        const move = () => {
            if (气泡.所有气泡.length > 0) {
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                气泡.所有气泡.forEach(气泡 => {
                    气泡.moving()
                    气泡.darw(canvas,ctx)
                    



                })
            }

            
        }
        const timeloop = setInterval(()=>{
            if(气泡.所有气泡.length<50){
                creat气泡(Math.random()*width,Math.random()*height)
            }
            move()
        },1)
        move()
        return () => {
           
            clearInterval(timeloop)
        }
    }, [height, width])

    return (
        <canvas ref={canvasref} width={width} height={height}>

        </canvas>
    )
}